<template>
  <div>
    <div class="ccui-tab-wrapper">
      <el-tabs
        id="jibenxinxi"
        v-model="isFocus"
        @tab-click="jump"
        class="el-tabs__customize"
      >
        <el-tab-pane
          v-for="item in tabs"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        ></el-tab-pane>
      </el-tabs>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: String,
      required: true
    },
    tabs: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      isFocus: 1
    };
  },
  watch: {
    active: {
      handler(newVal) {
        this.isFocus = newVal;
      },
      immediate: true
    }
  },
  methods: {
    // 锚点跳转
    jump(jumpTarget) {
      this.isFocus = jumpTarget.name;
      // document.getElementById(jumpTarget.name).scrollIntoView({
      //   behavior: "smooth", // 平滑过渡
      //   block: "start" // 上边框与视窗顶部平齐。默认值
      // });
      // 备用tab切换形式
      this.$emit("activeTabName", jumpTarget.label);
    }
  }
};
</script>

<style></style>
